<div id="heroes-main">
<h2>My Heroes</h2>
<!-- <ul class="heroes">
  <li *ngFor="let hero of heroes" 
    [class.selected]="hero === selectedHero"
    (click)="onSelect(hero)" >
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

<app-hero-detail [hero]="selectedHero"></app-hero-detail> -->


  <!-- <ul class="heroes">
    <li *ngFor="let hero of heroes" >
      <a routerLink="/detail/{{hero.id}}">
          <span class="badge">{{hero.id}}</span> {{hero.name}}
      </a>
    </li>
  </ul> -->


  <!-- <div class="container" [hidden]="submitted">
    <h1>Hero Form</h1>
    {{diagnostic}}
    <form #heroForm="ngForm" (ngSubmit)="onSubmit()" >
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name" required
          [(ngModel)]="model.name" name="name" #spy #name="ngModel">
          <br> remove this: {{spy.className}}
          <div [hidden]="name.valid || name.pristine">Name is required</div>
      </div>

      <div class="form-group">
        <label for="alterEgo">Alter Ego</label>
        <input type="text" class="form-control" id="alterEgo" name="alterEgo" 
          [(ngModel)]="model.alterEgo" >
      </div>

      <div class="form-group">
        <label for="power">power</label>
        <input type="text" class="form-control" id="power" name="power" 
          [(ngModel)]="model.power" required>
      </div>

      <button type="submit" class="btn btn-success" [disabled]='!heroForm.form.valid'>Submit</button>

    </form>
  </div>


  <div [hidden]="!submitted">
    <h2>You submitted the following:</h2>
    <div class="row">
      <div class="col-xs-3">Name</div>
      <div class="col-xs-9">{{ model.name }}</div>
    </div>
    <div class="row">
      <div class="col-xs-3">Alter Ego</div>
      <div class="col-xs-9">{{ model.alterEgo }}</div>
    </div>
    <div class="row">
      <div class="col-xs-3">Power</div>
      <div class="col-xs-9">{{ model.power }}</div>
    </div>
    <br>
    <button class="btn btn-primary" (click)="submitted=false">Edit</button>
  </div> -->

  <label>{{name.value}}</label>

  <form [formGroup]="profileForm">
    <input  class="form-control"
    formControlName="firstName" >

    <div formGroupName="address">
      <input  class="form-control"
      formControlName="city" >
    </div>

  </form>


</div>  



